<template>
  <div id="drawProcessDesign">
    <a-button @click="getData">提交</a-button>
    <a-modal
      title="流程描述"
      :visible="modelVisible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
     
      <a-row>
        <a-col class="mb10" :span="5">审批流名称:</a-col>
        <a-col class="mb10" :span="19"><a-input v-model="lcObj.name" placeholder="填写表单名称"></a-input></a-col>
      </a-row>
      <a-row>
        <a-col :span="5">审批流程描述:</a-col>
        <a-col :span="19"><a-input type="textarea" v-model="lcObj.description" placeholder="填写表单描述"></a-input></a-col>
      </a-row>
    </a-modal>
    <FactoryDrawFlow 
      :style="style"
    v-if="FlowConfig.length>0"
      @clickNode="clickNode"
      ref="flow"
      :FlowConfig="FlowConfig"
    ></FactoryDrawFlow>
  </div>
</template>
<style lang="less" scoped>
#drawProcessDesign {
  background: #f0f2f5;
}
</style>

<script>
import {save,getLcData} from '@/common/js/baseReq'
import {getQueryString} from '@/utils/index'
import { HashCode } from "../components/DrawFlow/src/utils";
import { deepClone } from "@/common/utils";
import {getFormdata,treeToLine,flattenF} from '@/utils/changeData'
export default {
  name: "Home",
  components: {},
  data() {
    return {
      FlowConfig: [],
      modelId:"",
      modelVisible:false,
      confirmLoading:false,
      lcObj:{
        id:"",
        name:"",
        description:"",
        processName:""
      },
      style:"",
      main:100,
      // FlowConfig:[{"id":"sid-517ee82a-b4f6-4c30-9b09-6d9893f9a1cd","groupId":null,"type":"1","title":"开始","content":"请选择","isRow":true,"isRoot":true,"data":{}},{"title":"条件","data":{},"id":"sid-883caf1b-d585-4c2e-bc25-3b9950780d14","groupId":"sid-bac40523-1eb8-4710-bbdb-5e8d8604257f","type":"3","content":"请填写条件","groupPid":"sid-517ee82a-b4f6-4c30-9b09-6d9893f9a1cd","isRow":false},{"title":"条件","data":{},"id":"sid-4ae492b5-ebd1-406a-9159-ebcb4b34857d","groupId":"sid-bac40523-1eb8-4710-bbdb-5e8d8604257f","type":"3","content":"请填写条件","groupPid":"sid-517ee82a-b4f6-4c30-9b09-6d9893f9a1cd","isRow":false},{"title":"审批人","content":"请选择审批人","groupId":"sid-082e0bf9-8e2c-42ee-bdb3-889daa95af10","id":"sid-c0464326-de08-42a0-a91f-ea7e6bbcd658","type":"2","isRow":true,"data":{}},{"title":"审批人","content":"请选择审批人","groupId":"sid-4ae492b5-ebd1-406a-9159-ebcb4b34857d","id":"sid-fb401528-dd3a-4325-bbf8-f827a9471115","type":"2","isRow":true,"data":{}},{"title":"条件","data":"","id":"sid-082e0bf9-8e2c-42ee-bdb3-889daa95af10","groupId":"sid-ae3ecd9b-28d4-44f7-b57f-b452dc740c65","type":"3","content":"请填写条件","groupPid":"sid-883caf1b-d585-4c2e-bc25-3b9950780d14","isRow":false},{"title":"条件","data":"","id":"sid-f78ecdc7-0fc2-47fd-94d6-55c69016fcf2","groupId":"sid-ae3ecd9b-28d4-44f7-b57f-b452dc740c65","type":"3","content":"请填写条件","groupPid":"sid-883caf1b-d585-4c2e-bc25-3b9950780d14","isRow":false}]
    };
  },
  created() {
    let modelId=getQueryString('modelId')
    this.modelId=modelId
    this.lcObj.id=modelId
    this.getLcData(modelId)

    this.init();
  },
  methods: {
    // 流程数据回显
    getLcData(id){
      getLcData(id).then(res=>{
        let response=res.data
        this.lcObj.name=response.name
        this.lcObj.description=response.description
         if(response.model.properties){
          this.lcObj.processName=response.model.properties.name
        }
        
        let getList=[]
        if(response.model0){
          getList=response.model0
          if(response.model0.lc_data){
            getList=response.model0.lc_data
          }
        }
        
        if(getList.length>0){
          this.FlowConfig=getList
        }else{
          let rootId=HashCode()
          this.FlowConfig.push({
              id: rootId,
              groupId: null,
              type: "1",
              title: "开始",
              content: "请选择",
              isRow: true,
              isRoot: true,
              data: {},
          })
        }
        
      })
    },

    // 缩小
    sx(){
      let type=Number(this.main/100)-0.1
      this.main=Number(type)*100
      this.style="transform: scale("+type+")"
    },

    // 流程描述弹窗展示
    getData() {
      // let tree= this.$refs.flow.getResTreeData()
      // let res = this.$refs.flow.getResData();
      // let treeToLineData=treeToLine(tree,res)
      this.modelVisible = true;
    },
    /**
     * 1、创建一个row length 1
     * 2、创建一个col节点
     * 3、创建一组col length 1
     * return [{pid id type}]
     */
    getNodeArr() {
      this.FlowConfig = this.$refs.flow.getNodeArr();
      return this.FlowConfig;
    },
    init() {
      // this.FlowConfig = this.transform(this.FlowConfig);
    },
    clickNode(node) {
    },

    handleOk(e) {
      let res = this.$refs.flow.getResData();
      let formdata=getFormdata(deepClone(res),this.lcObj)
      if(!formdata){
        return false
      }
      formdata.jsonXml0.lc_data=res
      formdata.jsonXml0=JSON.stringify(formdata.jsonXml0)
      this.confirmLoading = true;

      save(formdata,this.modelId).then(res=>{
        this.modelVisible = false;
        this.confirmLoading = false;
      })
    },
    handleCancel(e) {
      this.modelVisible = false;
    },
  },
  watch:{
    $route(to, from) {
      this.$router.go(0);
    },
  }
};
</script>
<style scoped>
.mb10{
  margin-bottom: 10px;
}
</style>
